<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="../css/style.css">
  <title>解析器</title>
</head>
<body>
  <h2>解析器</h2>
  <h3>解析器解析出来的AST的几个主要属性</h3>
  <li>tag: 标签名</li>
  <li>type: 节点类型</li>
  <li>static: 是否是静态节点</li>
  <li>parent: 父节点属性</li>
  <li>children: 子节点数组</li>

  <h3>解析器内部运行原理</h3>
  <h5>parseHTML的钩子函数</h5>
  <li>start: 解析到标签开始位置的时候，触发这个函数。<span>所以我们在这儿创建元素节点</span></li>
  <li>end: 每当解析到标签结束位置时，触发该函数。</li>
  <li>chars: 每当解析到文本时，触发该函数。<span>所以在这儿创建文本节点</span></li>
  <li>comment: 每当解析到注释时，触发该函数。<span>所以我们在这儿创建注释节点</span></li>
  <li>创建各种节点的方式就是跟据AST的格式，去构建对应类型的对象即可</li>

  <h3>HTML解析器</h3>
  <li>
    Vuejs通过维护一个栈来构建AST的层级关系
  </li>
  <li>
    HTML解析器解析模板的过程其实是循环的过程，循环模板字符串，每次截取一小段，直到字符串截取为空为止
  </li>
</body>
</html>